<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny"  v-if="del">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
             <el-form-item label="接货日期" label-width="100px">
              <el-date-picker
                v-model="tableSearchParam.packageDateFrom"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择">
              </el-date-picker>
              <span style="margin: 5px;">至</span>
              <el-date-picker
                v-model="tableSearchParam.packageDateTo"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择">
              </el-date-picker>
            </el-form-item>
             <el-form-item label="收货日期" label-width="100px">
              <el-date-picker
                v-model="tableSearchParam.receiverDateFrom"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择">
              </el-date-picker>
              <span style="margin: 5px;">至</span>
              <el-date-picker
                v-model="tableSearchParam.receiverDateTo"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="运输单号" label-width="100px">
              <el-input v-model="tableSearchParam.orderId" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="托运人手机" label-width="100px">
              <el-input v-model="tableSearchParam.clientPhone" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="承运人手机" label-width="100px">
              <el-input v-model="tableSearchParam.mobile" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
           <el-form-item label="结算方式" label-width="100px">
              <el-select v-model="tableSearchParam.payMethod" clearable style="width: 200px">
                <el-option value="2" key="2" label="月结"></el-option>
                <el-option value="1" key="1" label="现结"></el-option>
              </el-select>
            </el-form-item>   
        
            
            <el-form-item label="卸货方式" label-width="100px">
              <el-select v-model="tableSearchParam.unloadedMethod" clearable style="width: 200px">
                <el-option value="1" key="1" label="承运方卸载"></el-option>
                <el-option value="2" key="2" label="接收方卸载"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="运输单号"
            property="orderId" width="165">
          </el-table-column>
          <el-table-column
            label="承运人"
            property="name"
            width="90">
          </el-table-column>
          <el-table-column
            label="承运人手机"
            property="mobile"
            width="90">
          </el-table-column>
          <el-table-column
            label="委托人"
            property="clientName"
            width="130">
          </el-table-column>
          <el-table-column
            label="委托人手机"
            property="clientPhone"
            width="100">
          </el-table-column>
           <el-table-column
            label="卸货方式"
            property="unloadedMethodLabel"
            width="100">
          </el-table-column>
           <el-table-column
            label="结算方式"
            property="payMethodLabel"
            width="100">
          </el-table-column>
          <el-table-column
            label="金额"
            property="amount"
            width="100">
          </el-table-column>
          <el-table-column
            label="状态"
            property="statusLabel"
            width="60">
          </el-table-column>
          <el-table-column
            label="接货日期"
            property="packageDate"
            width="135">
          </el-table-column>
          <el-table-column
            label="收货日期"
            property="receiverDate"
            width="135">
          </el-table-column>
          <el-table-column label="操作" width="600">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="success"
                  v-if="load"
                  @click="viewData(scope.$index, scope.row)">查看
                </el-button>
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="danger"
                  v-if="del"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="运输单详情" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <div style="height:500px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">运输单编号</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.orderId}}</el-col>
          <el-col :span="4" class="m-col-left">状态</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.statusLabel}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">承运人</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.name}}</el-col>
          <el-col :span="4" class="m-col-left">承运人手机</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.mobile}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col" v-if="transportConfirm.company">承运公司</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.company}}</el-col>
          <el-col :span="4" class="m-col">委托方公司</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.name}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">委托人姓名</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.clientName}}</el-col>
          <el-col :span="4" class="m-col-left">委托人手机</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.clientPhone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">收货方姓名</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.receiverName}}</el-col>
          <el-col :span="4" class="m-col-left">收货方手机</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.receiverPhone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">收货方公司</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.receiverCompany}}</el-col>
          <el-col :span="4" class="m-col-left">收货方地址</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.receiverAddr}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">卸货方式</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.unloadedMethodLabel}}</el-col>
          <el-col :span="4" class="m-col">结算方式</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.payMethodLabel}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">运输物</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.transports}}</el-col>
          <el-col :span="4" class="m-col">金额</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.amount}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">接货日期</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.packageDate}}</el-col>
          <el-col :span="4" class="m-col-left">收获日期</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.receiverDate}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">卸货地址</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.unloadPlace}}</el-col>
          <el-col :span="4" class="m-col-left">付费方</el-col>
          <el-col :span="8" class="m-col-left">{{transportConfirm.payerLabel}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col-bottom">运输货物照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  transportConfirm.goodsPhotos">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="item.baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
         <el-row>
        <el-col :span="4" class="m-col-bottom">卸货货物照片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  transportConfirm.unloadedPictures">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="item.baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
   <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

</style>

<script>
  import transportConfirmApi from '@/api/transportConfirmApi'

  export default {
    created() {
      this.list = this.permissionValid.validAction(this.permissionValid.permissionRule.transportConfirm.list)
      this.del = this.permissionValid.validAction(this.permissionValid.permissionRule.transportConfirm.del)
      this.load = this.permissionValid.validAction(this.permissionValid.permissionRule.transportConfirm.load)
      this.listTableData()
    },
    data() {
      return {
       list:false,
       del:false,
       load:false,
       
        tableSearchParam: {
          packageDateFrom: '',
          packageDateTo: '',
          receiverDateFrom: '',
          receiverDateTo:'',
          orderId: '',
          clientPhone:'',
          mobile:'',
          payMethod:'',
          unloadedMethod:''     
        },
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        updategiftProduct: {
          id: '',
          giftProductId: ''
        },
        dialogProductVisible: false,
        allProduct: [],
        uploadConstraint: {
          is_taking_pictures: 0,
          is_photo: 0
        } ,
        dialogUploadConstraintFormVisible: false,
        multipleSelection: [],
        dialogCloseCaseFormVisible: false,
        currentId:'',
        dialogFormVisible: false,
        transportConfirm:{},
        dialogImgFormVisible:false,
        roteVal: 0,
        imgUrlaa: '',
        baseUrl: process.env.IMG_BASE_URL,
      }
    },
    methods: {
      roteImg() {
        this.roteVal += 90
      },
      
      openCloseCaseDialog(index, row){
          this.dialogCloseCaseFormVisible = true 
          this.currentId = row.id
      },
      closeCaseDialog(){
        this.dialogCloseCaseFormVisible = false 
        this.currentId = ''
      },
     
    
      listTableData() {
        transportConfirmApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      addData() {
        var t = new Date().getTime();
        this.$router.push({path: '/insurance/product/info/add', query: {t: t}})
      },
      viewData(index, row) {
        transportConfirmApi.load(row.id, (res) => {
          this.transportConfirm = res
          this.dialogFormVisible = true
        }, () => {
        })
      },
     showImg(url) {
        this.roteVal = 0
        this.dialogImgFormVisible = true
        this.imgUrlaa = url
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      handleDelete(index, row) {
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          transportConfirmApi.remove(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          transportConfirmApi.batchRemove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
       
      
      checkChange(value) {
        if (value.indexOf('pz') != -1) {
          this.uploadConstraint.is_taking_pictures = '1'
        } else {
          this.uploadConstraint.is_taking_pictures = '0'
        }

        if (value.indexOf('xc') != -1) {
          this.uploadConstraint.is_photo = '1'
        } else {
          this.uploadConstraint.is_photo = '0'
        }

        this.formData.uploadConstraint = this.uploadConstraint
      },
      roleSelectChange(v) {
        for (var o of this.allServiceProdiver) {
          if (o.id == v) {
            this.strategyFormData.role = o.id
            this.strategyFormData.roleName = o.name
            break
          }
        }
      },
      editStrategy(index, row) {
        this.insuranceClassifyId = row.id
        this.strategyFormDatas = row.dividedStrategy || []
        this.dialogStrategyAFormVisible = true
      },
      addStrategyData() {
        this.strategyFormData = {
          role: '',
          roleName: '',
          shared: '',
          integral: ''
        }
        this.actionStrategyType = 'add'
        this.dialogStrategyBFormVisible = true
      },
      handleStrategyAdd() {
        if (this.checkStrategy(this.strategyFormData.role)) {
          this.$message({
            type: 'warning',
            message: '该服务商角色已添加!'
          })
          return
        }
        this.strategyFormDatas.push(this.strategyFormData)
        this.dialogStrategyBFormVisible = false
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      },
      checkStrategy(role) {
        for (var sf of this.strategyFormDatas) {
          if (sf.role == role) {
            return true
          }
        }
        return false
      },
      editStrategyData(index, row) {
        for (const s of this.strategyFormDatas) {
          if (s.role === row.role) {
            this.handleId = row.role
            let qqstrategyFormData = {
              role: '',
              roleName: '',
              shared: '',
              integral: ''
            }
            qqstrategyFormData.role = s.role
            qqstrategyFormData.roleName = s.roleName
            qqstrategyFormData.shared = s.shared
            qqstrategyFormData.integral = s.integral
            this.strategyFormData = qqstrategyFormData
            this.actionStrategyType = 'edit'
            this.dialogStrategyBFormVisible = true
            break
          }
        }
      },
      handleStrategyEdit() {
        let index = 0;
        for (const s of this.strategyFormDatas) {
          if (s.role === this.handleId) {
            this.strategyFormDatas.splice(index, 1)
            this.strategyFormDatas.push(this.strategyFormData)
            this.dialogStrategyBFormVisible = false
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            break
          }
          index++
        }
      },
      handleStrategySelectionChange(val) {
        this.multipleStrategySelection = []
        for (var ms of val) {
          this.multipleStrategySelection.push(ms.role)
        }
      },
      deleteStrategyAny() {
        if (this.multipleStrategySelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (const m of this.multipleStrategySelection) {
            let i = 0
            for (const s of this.strategyFormDatas) {
              if (s.role === m) {
                this.strategyFormDatas.splice(i, 1)
                break
              }
              i++
            }
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } 
    }
  }
</script>
